<template>
  <div class="track_the_playback">
    <div class="aroundtop">
      <!-- 设置分组 -->
      <i class="el-icon-speed" title="分组">区域</i>
      <el-select
        v-model="CLIENT_GROUP_NAME"
        placeholder="请选择分组"
        @change="groupchange"
      >
        <el-option
          v-for="(item, index) in groupingList"
          :value="item.CLIENT_GROUP_NAME"
          :label="item.CLIENT_GROUP_NAME"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 设置道路 -->
      <i class="el-icon-speed" title="道路名称">道路名称</i>
      <el-select
        v-model="Rname"
        placeholder="请选择道路"
        @change="$forceUpdate()"
        ref="roadname"
      >
        <el-option
          v-for="(item, index) in roadList"
          :value="item.Rname"
          :label="item.Rname"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 设置时间 -->
      <i class="el-icon-speed" title="时间">时间</i>
      <el-date-picker
        v-model="selectDay"
        type="date"
        placeholder="选择日"
        ref="historytime"
        @change="dataSearch"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>
      <i class="el-icon-speed" title="时段">时段</i>
      <el-select v-model="timesdstr" placeholder="请选择时段" ref="timesd">
        <el-option
          v-for="(item, index) in timesdlist"
          :value="item.timesd"
          :label="item.timesd"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 道路播放 -->
      <span
        class="buttonI"
        title="道路播放"
        @click="start"
        style="margin-left: 5px"
        >道路播放</span
      >
      <!-- 全区播放 -->
      <span class="buttonI" title="全区播放" @click="startAll">全区播放</span>
      <!-- 轨迹点数据 -->
      <span class="buttonI" title="轨迹点数据" @click="openDataList"
        >轨迹点数据</span
      >
      <!-- 图片导出 -->
      <span class="buttonI" title="图片导出" @click="savepic">图片导出</span>
      <div>
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showcarnamechecked"
            active-color="#13ce66"
          ></el-switch>
          <i
            class="el-icon-speed"
            title="是否显示作业车辆牌照"
            style="margin-left: 10px"
            >是否显示作业车辆牌照</i
          ></span
        >
      </div>
      <!-- <div class="aroundtopdown"> -->
      <div class="aroundtopcontent">
        <!-- 轨迹偏移设置 -->
        <i class="el-icon-speed" title="轨迹偏移设置">轨迹偏移设置：</i>
        <el-checkbox class="el-checkbox-show" v-model="linevalue.jscheck"
          >已完成</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.jsvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.xlcheck"
          >未完成</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.xlvalue"
        />
        
        <el-checkbox class="el-checkbox-show" v-model="linevalue.gycheck"
          >高压清洗车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.gyvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.xccheck"
          >吸尘车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.xcvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.sscheck"
          >洒水车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.ssvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.xjcheck"
          >小型机扫车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.xjvalue"
        />
        <span
          style="
            color: #007acc;
            font-size: 15px;
            margin-right: 10px;
            font-weight: bold;
          "
          title="线粗"
          >线粗</span
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.cxvalue"
        />
      </div>
      <!-- </div> -->
    </div>

    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
    <!-- 数据列表 -->
    <el-dialog
      title="点位数据列表"
      :visible.sync="dataListDialog"
      width="55%"
      class="dialogchild"
    >
      <el-form style="height: 40px; padding-top: 15px">
        <i class="el-icon-speed" style="margin-left: 20px; margin-right: 10px"
          >车辆名称</i
        >
        <el-select
          v-model="LICENSE_PLATE"
          placeholder="请选择车辆名称"
          @change="carchange"
        >
          <el-option
            v-for="(item, index) in carList"
            :value="item.LICENSE_PLATE"
            :label="item.LICENSE_PLATE"
            :key="index"
          ></el-option>
        </el-select>
      </el-form>
      <el-table
        :data="onecardataList"
        style="width: 150%"
        fit
        max-height="550"
        highlight-current-row
      >
        <!-- {"Lng":"117.449241907762","Lat":"38.8629691205361","Speed":"50","Direction":"西","GpsTime":"2020/12/21 9:16:47"}, -->
        <el-table-column
          prop="LICENSE_PLATE"
          label="车辆牌照"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CAR_TYPE"
          label="车辆类型"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ORIENTATION_TIME"
          label="定位时间"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NewLng"
          label="经度"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NewLat"
          label="纬度"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SPEED"
          label="速度"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="StatusName"
          label="速度是否符合"
          width="140"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 图例 -->
    <!-- 右下角 图例展开按钮-->
    <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/common/js/date.js";

import MapStr from "@/main.js";
import DirectionImg from "@/assets/img/playback/direction.png";
import imgrouteJISAO from "@/assets/img/MapMarker/vehicleRoute/jsRoute.png";
import imgrouteXIAOXING from "@/assets/img/MapMarker/vehicleRoute/xxRoute.png";
import imgrouteXICHEN from "@/assets/img/MapMarker/vehicleRoute/xcRoute.png";
import imgRouteSASHUI from "@/assets/img/MapMarker/vehicleRoute/ssRoute.png";
import imgrouteGAOYA from "@/assets/img/MapMarker/vehicleRoute/gyRoute.png";
import imgrouteXILU from "@/assets/img/MapMarker/vehicleRoute/xlRoute.png";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      setSlider: {
        max: 100,
        value: 0,
        step: 1,
      },
      timesdstr: "全天",
      map: null,
      hshmap: new Map(),
      mapZoom: 20,
      markerWithSlider: null,
      dataListDialog: false,
      dataList: [],
      dataListc: [],
      dataCurrentIndex: 0,
      CLIENT_GROUP_NAME: "",
      CLIENT_GROUP_NO: "",
      VID: 0,
      setTime: {},
      selectDay: "",
      groupingList: [],
      carList: [],
      onecardataList: [],
      roadList: [],
      timesdlist: [{ timesd: "全天" }, { timesd: "上午" }, { timesd: "下午" }],
      showcarnamechecked: false,
      showLegend: true,
      legend: {
        routeJISAO: imgrouteJISAO,
        routeXIAOXING: imgrouteXIAOXING,
        routeXICHEN: imgrouteXICHEN,
        routeSASHUI: imgRouteSASHUI,
        routeGAOYA: imgrouteGAOYA,
        routeXILU: imgrouteXILU,
      },
      linevalue: {
        jsvalue: 4,
        gyvalue: 8,
        xlvalue: 12,
        xcvalue: 16,
        ssvalue: 20,
        xjvalue: 24,
        jscheck: true,
        gycheck: true,
        xlcheck: true,
        xccheck: true,
        sscheck: true,
        xjcheck: true,
        cxvalue: 5,
      },
    };
  },
  created() {
    this.VID = this.$route.query.VID;
    var now = new Date();
    now.setDate(now.getDate() - 1);
    var monthn = now.getMonth() + 1;
    var yearn = now.getFullYear();
    var dayn = now.getDate();
    this.selectDay = yearn + "-" + monthn + "-" + dayn;
    // 隐藏图例
    eventBus.$on("toHideLegend", () => {
      this.showLegend = false;
    });
  },
  methods: {
    dataSearch() {
      // this.getListByDay();
      this.getRoadList(this.CLIENT_GROUP_NAME);
    },
    groupchange(val) {
      this.getRoadList(this.CLIENT_GROUP_NAME);
      for (var i = 0; i < this.groupingList.length; i++) {
        if (this.groupingList[i].CLIENT_GROUP_NAME == val) {
          this.CLIENT_GROUP_NO = this.groupingList[i].CLIENT_GROUP_NO;
        }
      }
    },
    carchange(val) {
      this.onecardataList = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i][0].LICENSE_PLATE == val) {
          this.onecardataList = this.onecardataList.concat(this.dataList[i]);
        }
      }
    },
    // async getListByDay(data) {},
    // 显示地图
    mapShow() {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom(
        new BMap.Point(MapStr.DefaultPointX, MapStr.DefaultPointY),
        this.mapZoom
      ); // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity(MapStr.MapName); // 设置地图显示的城市 此项是必须设置的
      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true);
      var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), {
        anchor: new BMap.Size(20, 20),
      });
      this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), {
        icon: myIcon,
      });
      this.markerWithSlider.disableMassClear();
      this.map.addOverlay(this.markerWithSlider);
    },
    // 选定时间,获取车辆数据列表
    async getcarDataList() {
      if (
        this.$refs.roadname.value == null ||
        this.$refs.roadname.value == "undefined"
      ) {
        this.$message.error("未选择道路");
        return;
      }
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      const params = {
        workdate: str,
        roadname: this.$refs.roadname.value,
        client_no: this.CLIENT_GROUP_NO,
      };
      const { data } = await this.$Http.get("Vehicle/GetRoadVehicleInfo", {
        params,
      });
      if (data.length != 0) {
        this.carList = data;
      } else {
        this.$message.error("未获取到车辆");
      }
    },
    // 选定时间,获取道路轨迹数据列表
    async getDataList() {
      if (
        this.$refs.roadname.value == null ||
        this.$refs.roadname.value == "undefined"
      ) {
        this.$message.error("未选择道路");
        return;
      }

      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      const params = {
        workdate: str,
        roadname: this.$refs.roadname.value,
        timestatus: this.$refs.timesd.value,
        client_no: this.CLIENT_GROUP_NO,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get("Vehicle/VehicleRoadHistoryTest", {
        params,
      });
      // const { data } = await this.$Http.get('Vehicle/VehicleRoadHistory', { params })
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.dataListc = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPicture();
      } else {
        this.$message.error("未获取到轨迹");
      }
    },
    // 选定时间,获取全区轨迹数据列表
    async getDataListAll() {
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      const params = {
        workdate: str,
        timestatus: this.$refs.timesd.value,
        client_no: this.CLIENT_GROUP_NO,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "Vehicle/VehicleRoadHistoryALLTest",
        { params }
      );
      // const { data } = await this.$Http.get('Vehicle/VehicleRoadHistoryALL', { params })
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.dataListc = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPicture();
      } else {
        this.$message.error("未获取到轨迹");
      }
    },
    // 获取两个点的角度
    getAngle(lng1, lat1, lng2, lat2) {
      const a = ((90 - lat2) * Math.PI) / 180;
      const b = ((90 - lat1) * Math.PI) / 180;
      const AOC_BOC = ((lng2 - lng1) * Math.PI) / 180;
      const cosc =
        Math.cos(a) * Math.cos(b) +
        Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
      const sinc = Math.sqrt(1 - cosc * cosc);
      const sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc;
      const A = (Math.asin(sinA) * 180) / Math.PI;
      let res = 0;
      if (lng2 > lng1 && lat2 > lat1) res = A;
      else if (lng2 > lng1 && lat2 < lat1) res = 180 - A;
      else if (lng2 < lng1 && lat2 < lat1) res = 180 - A;
      else if (lng2 < lng1 && lat2 > lat1) res = 360 + A;
      else if (lng2 > lng1 && lat2 === lat1) res = 90;
      else if (lng2 < lng1 && lat2 === lat1) res = 270;
      else if (lng2 === lng1 && lat2 > lat1) res = 0;
      else if (lng2 === lng1 && lat2 < lat1) res = 180;
      return res;
    },
    Angle(cen, first, second) {
      var ma_x = first.NewLng - cen.NewLng;
      var ma_y = first.NewLat - cen.NewLat;
      var mb_x = second.NewLng - cen.NewLng;
      var mb_y = second.NewLat - cen.NewLat;
      var v1 = ma_x * mb_x + ma_y * mb_y;
      var ma_val = Math.sqrt(ma_x * ma_x + ma_y * ma_y);
      var mb_val = Math.sqrt(mb_x * mb_x + mb_y * mb_y);
      var cosM = v1 / (ma_val * mb_val);
      var angleAMB = (Math.acos(cosM) * 180) / Math.PI;

      return angleAMB;
    },
    // 打开数据列表
    openDataList() {
      this.getcarDataList();
      this.dataListDialog = true;
      this.getDataList();
    },
    //截屏保存成图片
    async savepic() {
      let canvas = document.querySelector(".track_the_playback");
      let that = this;
      html2canvas(canvas, {
        useCORS: true,
        tainttest: true,
        allowTaint: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
      }).then(function (canvas) {
        let type = "png";
        let imgData = canvas.toDataURL(type);
        // 照片格式处理
        let _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, "jpeg");
          let r = type.match(/png|jpeg|bmp|gif/)[0];
          return "image/" + r;
        };
        imgData = imgData.replace(_fixType(type), "image/octet-stream");
        let filename = "道路轨迹图片" + "." + type;
        that.saveFile(imgData, filename);
      });
    },
    saveFile(data, filename) {
      let save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },
    //画出整个轨迹
    drawPicture() {
      this.map.clearOverlays();
      this.hshmap.clear();
      var offSet = 0.0;
      var offRight = true;

      for (var i = 0; i < this.dataList.length; i++) {
        if (
          (this.dataList[i][0].CAR_TYPE == "机扫车" &&
            this.linevalue.jscheck) ||
          (this.dataList[i][0].CAR_TYPE == "高压清洗车" &&
            this.linevalue.gycheck) ||
          (this.dataList[i][0].CAR_TYPE == "洗路车" &&
            this.linevalue.xlcheck) ||
          (this.dataList[i][0].CAR_TYPE == "小型机扫车" &&
            this.linevalue.xjcheck) ||
          (this.dataList[i][0].CAR_TYPE == "吸尘车" &&
            this.linevalue.xccheck) ||
          (this.dataList[i][0].CAR_TYPE == "洒水车" && this.linevalue.sscheck)
        ) {
          switch (this.dataList[i][0].CAR_TYPE) {
            case "机扫车":
              offSet = this.linevalue.jsvalue * 0.00001;
              offRight = true;
              break;
            case "高压清洗车":
              offSet = this.linevalue.gyvalue * 0.00001;
              offRight = true;
              break;
            case "洗路车":
              offSet = this.linevalue.xlvalue * 0.00001;
              offRight = true;
              break;
            case "小型机扫车":
              offSet = this.linevalue.xjvalue * 0.00001;
              offRight = false;
              break;
            case "吸尘车":
              offSet = this.linevalue.xcvalue * 0.00001;
              offRight = false;
              break;
            case "洒水车":
              offSet = this.linevalue.ssvalue * 0.00001;
              offRight = false;
              break;
          }
          var temp = [];
          for (var Hg = 0; Hg < this.dataList[i].length; Hg++) {
            var changMax = this.dataList[i][0].changeMax;
            //第一个点
            if (Hg == 0) {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg + 2],
                  offSet,
                  offRight,
                  changMax
                )
              );
            }
            //最后一个点
            else if (Hg == this.dataList[i].length - 1) {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg - 2],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg],
                  offSet,
                  offRight,
                  changMax
                )
              );
            } else {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg - 1],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg + 1],
                  offSet,
                  offRight,
                  changMax
                )
              );
            }
          }
          this.dataList[i] = temp;
        }
      }

      for (var i = 0; i < this.dataList.length; i++) {
        if (
          (this.dataList[i][0].CAR_TYPE == "机扫车" &&
            this.linevalue.jscheck) ||
          (this.dataList[i][0].CAR_TYPE == "高压清洗车" &&
            this.linevalue.gycheck) ||
          (this.dataList[i][0].CAR_TYPE == "洗路车" &&
            this.linevalue.xlcheck) ||
          (this.dataList[i][0].CAR_TYPE == "小型机扫车" &&
            this.linevalue.xjcheck) ||
          (this.dataList[i][0].CAR_TYPE == "吸尘车" &&
            this.linevalue.xccheck) ||
          (this.dataList[i][0].CAR_TYPE == "洒水车" && this.linevalue.sscheck)
        ) {
          var pointArr = [];
          for (var j = 0; j < this.dataList[i].length; j++) {
            const item1 = this.dataList[i][j];
            if (j == 0) {
              pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
            } else if (j == this.dataList[i].length - 1) {
              pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
              let color = "";
              if (this.dataList[i][0].CAR_TYPE == "机扫车") {
                color = "#16F111";
              } else if (this.dataList[i][0].CAR_TYPE == "高压清洗车") {
                color = "#FF00FF";
              } else if (this.dataList[i][0].CAR_TYPE == "洗路车") {
                color = "#F70303";
              } else if (this.dataList[i][0].CAR_TYPE == "小型机扫车") {
                color = "#000000";
              } else if (this.dataList[i][0].CAR_TYPE == "吸尘车") {
                color = "#0302FD";
              } else if (this.dataList[i][0].CAR_TYPE == "洒水车") {
                color = "#753631";
              }
              var polyline = new BMap.Polyline(pointArr, {
                strokeColor: color,
                strokeWeight: this.linevalue.cxvalue,
                strokeOpacity: 2,
              });
              this.map.addOverlay(polyline);
            } else {
              var ag = this.Angle(
                this.dataList[i][j],
                this.dataList[i][j - 1],
                this.dataList[i][j + 1]
              );
              if (ag > 160 || ag < 20)
                pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
              else {
                let color = "";
                if (this.dataList[i][0].CAR_TYPE == "机扫车") {
                  color = "#16F111";
                } else if (this.dataList[i][0].CAR_TYPE == "高压清洗车") {
                  color = "#FF00FF";
                } else if (this.dataList[i][0].CAR_TYPE == "洗路车") {
                  color = "#F70303";
                } else if (this.dataList[i][0].CAR_TYPE == "小型机扫车") {
                  color = "#000000";
                } else if (this.dataList[i][0].CAR_TYPE == "吸尘车") {
                  color = "#0302FD";
                } else if (this.dataList[i][0].CAR_TYPE == "洒水车") {
                  color = "#753631";
                }
                var polyline = new BMap.Polyline(pointArr, {
                  strokeColor: color,
                  strokeWeight: this.linevalue.cxvalue,
                  strokeOpacity: 2,
                });
                this.map.addOverlay(polyline);
                pointArr = [];
              }
            }
          }

          if (
            !this.hshmap.has(this.dataList[i][0].LICENSE_PLATE) &&
            this.showcarnamechecked
          ) {
            this.hshmap.set(this.dataList[i][0].LICENSE_PLATE, 1);
            var point = new BMap.Point(
              this.dataList[i][0].NewLng,
              this.dataList[i][0].NewLat
            );
            var markerImage = new BMap.Icon(
              DirectionImg,
              new BMap.Size(50, 50)
            );
            var marker = new BMap.Marker(point, { icon: markerImage });
            var label = new BMap.Label(
              this.dataList[i][0].LICENSE_PLATE +
                this.dataList[i][0].ORIENTATION_TIME,
              { offset: new BMap.Size(-10, 50) }
            );
            marker.setLabel(label);
            this.map.addOverlay(marker);
          }
        }
      }
      // this.map.centerAndZoom(
      //   new BMap.Point(this.dataList[0][0].NewLng, this.dataList[0][0].NewLat),
      //   this.mapZoom
      // );
      this.countMaxMin();
    },
    countMaxMin() {
      var pointArr = [];
      for (var i = 0; i < this.dataListc.length; i++) {
        for (var j = 0; j < this.dataListc[i].length; j++) {
          pointArr.push(
            new BMap.Point(
              this.dataListc[i][j].NewLng,
              this.dataListc[i][j].NewLat
            )
          );
        }
      }
      var polyline = new BMap.Polyline(pointArr, {
        strokeColor: "#16F111",
        strokeWeight: this.linevalue.cxvalue,
        strokeOpacity: 2,
      });
      // this.map.centerAndZoom(polyline.getBounds().getCenter(), 18);
      this.map.setViewport(pointArr);
    },
    // 获得分组列表
    async getGroupingList() {
      var url =
        "Vehicle/GetClientInfo?client_no=" + localStorage.getItem("CLIENT_NO"); // zxdata
      let { data } = await this.$Http.get(url);
      this.groupingList = data;
      this.CLIENT_GROUP_NAME = '全部';
      this.CLIENT_GROUP_NO = data[0].CLIENT_GROUP_NO;
      this.getRoadList(data[0].CLIENT_GROUP_NAME);
    },
    // 获得道路列表
    async getRoadList(val) {
      // var url = "Vehicle/GetRoadInfo?client_name=" + val; // zxdata
      let date = new Date(this.$refs.historytime.value);
      let datestr = formatDate(date, "yyyy-MM-dd");
      var url = "Vehicle/GetRoadInfo?workdate="+datestr+"&client_name=" + val; // zxdata

      let { data } = await this.$Http.get(url);
      this.roadList = data;
      this.Rname = '全部';
    },
    //进行轨迹点偏移
    getCorrentVehicleInfoThree(
      info1,
      info2,
      info3,
      distance,
      rightOff,
      changeMax
    ) {
      //两点之间的弧度
      var offAngel = 0;
      var info = new Object();
      var xiangxian = "";
      //两点经度差

      var offX = info3.NewLng * 1 - info1.NewLng * 1;
      //两点纬度差
      var offY = info3.NewLat * 1 - info1.NewLat * 1;
      //经度偏移
      var offLng = 0;

      //纬度偏移
      var offLat = 0;

      //偏移系数X
      var facX = 0;

      //偏移系数Y
      var facY = 0;

      if (info3.NewLng != info1.NewLng) {
        offAngel = Math.atan2(Math.abs(offX), Math.abs(offY));
      }

      //第一象限
      if (offX > 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 1;
      }
      //第二象限
      else if (offX < 0 && offY > 0) {
        xiangxian = "二象限";
        facX = -1;
        facY = -1;
      }
      //第三象限
      else if (offX < 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = -1;
      }
      //第四象限
      else if (offX > 0 && offY < 0) {
        xiangxian = "四象限";
        facX = 1;
        facY = 1;
      } else if (offX == 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 0;
      } else if (offX < 0 && offY == 0) {
        xiangxian = "二象限";

        facX = 0;
        facY = -1;
      } else if (offX == 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = 0;
      } else if (offX > 0 && offY == 0) {
        xiangxian = "四象限";
        facX = 0;
        facY = 1;
      }

      switch (changeMax) {
        case "X+":
          facY = -1;
          break;

        case "X-":
          facY = 1;
          break;

        case "X0":
          facY = -1;
          break;

        case "Y+":
          facX = 1;
          break;

        case "Y-":
          facX = -1;
          break;

        case "Y0":
          facX = 1;
          break;
      }

      facX = -1.0 * facX;
      facY = -1.0 * facY;

      // if (offX > 0 && offY > 0)
      // {
      //     xiangxian = "一象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = -1.0;
      //         facY = 1.0;
      //     }
      //     //左偏移
      //     else
      //     {

      //         facX = 1.0;
      //         facY = -1.0;
      //     }
      // }
      // //第二象限
      // else if (offX < 0 && offY > 0)
      // {
      //     xiangxian = "二象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = 1.0;
      //         facY = 1.0;
      //     }
      //     else
      //     {
      //         facX = -1.0;
      //         facY = -1.0;
      //     }
      // }
      // //第三象限
      // else if (offX < 0 && offY < 0)
      // {
      //     xiangxian = "三象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = -1.0;
      //         facY = 1.0;
      //     }
      //     else
      //     {
      //         facX = 1.0;
      //         facY = -1.0;
      //     }
      // }
      // //第四象限
      // else if (offX > 0 && offY < 0)
      // {
      //     xiangxian = "四象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = 1.0;
      //         facY = 1.0;
      //     }
      //     else
      //     {
      //         facX = -1.0;
      //         facY = -1.0;
      //     }
      // }
      // else if (offX == 0 && offY > 0)
      // {
      //     xiangxian = "一象限";

      //     offAngel = 0;
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = -1.0;
      //         facY = 0;
      //     }
      //     else
      //     {
      //         facX = 1.0;
      //         facY = 0;
      //     }
      // }
      // else if (offX < 0 && offY == 0)
      // {
      //     offAngel = Math.PI / 2.0;
      //     xiangxian = "二象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = 0;
      //         facY = 1.0;
      //     }
      //     else
      //     {
      //         facX = 0;
      //         facY = -1.0;
      //     }
      // }

      // else if (offX == 0 && offY < 0)
      // {
      //     offAngel = 0;
      //     xiangxian = "三象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = 1.0;
      //         facY = 0;
      //     }
      //     else
      //     {
      //         facX = -1.0;
      //         facY = 0;
      //     }
      // }
      // else if (offX > 0 && offY == 0)
      // {
      //     offAngel = Math.PI / 2.0;
      //     xiangxian = "四象限";
      //     //右偏移
      //     if (rightOff)
      //     {
      //         facX = 0;
      //         facY = 1.0;
      //     }
      //     else
      //     {
      //         facX = 0;
      //         facY = -1.0;
      //     }
      // }

      //计算偏移
      offLng = distance * Math.cos(offAngel);
      offLat = distance * Math.sin(offAngel);

      info.NewLng = info2.NewLng * 1 + facX * offLng;
      info.NewLat = info2.NewLat * 1 + facY * offLat;
      info.ORIENTATION_TIME = info2.ORIENTATION_TIME;
      info.VID = info2.VID;
      info.CAR_TYPE = info2.CAR_TYPE;
      info.LICENSE_PLATE = info2.LICENSE_PLATE;
      info.SPEED = info2.SPEED;
      info.StatusName = info2.StatusName;
      return info;
    },

    // 开始播放道路作业轨迹
    start() {
      this.linetopdata = [];
      this.dataListDialog = false;
      this.getDataList();
    },
    // 开始播放全区作业轨迹
    startAll() {
      // this.showcarnamechecked = false;
      this.dataListDialog = false;
      this.getDataListAll();
    },
    // 清除轨迹
    clear() {
      this.stop();
      this.ary = [];
      this.dataCurrentIndex = 0;
      this.markerWithSlider.setPosition(new BMap.Point(0, 0));
      this.map.clearOverlays();
    },
  },
  mounted() {
    // 显示地图
    this.getGroupingList();
    this.mapShow();
  },
};
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .aroundtop {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      .el-checkbox-show {
        background-color: #007acc;
        border-color: rgb(196, 105, 20);
      }
    }
    .aroundtopcontent {
      // margin-left: 2px;
      margin-top: 8px;
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      i {
        color: #007acc;
        font-size: 17px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
      }

      .input-number {
        margin-top: 8px;
        margin-right: 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox-show {
        background-color: rgb(255, 255, 255);
        border-color: rgb(196, 105, 20);
        margin-right: 8px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
    .person_legend {
      width: 550px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background-color: rgba(255, 0, 0, 0.9);
      padding: 5px 10px 0 10px;
      border-radius: 5px;
      h3 {
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #333;
        margin-bottom: 5px;
        i {
          float: right;
          cursor: pointer;
          &:before {
            color: #666;
          }
        }
      }
      p {
        // text-align: center;
        color: #333;
        float: left;
        width: 14%;
        margin-bottom: 8px;
        span {
          display: block;
          text-align: center;
          &:first-child {
            img {
              // background-size: 30px 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
.settingWindow {
  height: calc(~"100% - 32px");
}
/* 弹出框 */
/deep/.el-dialog {
  background: #ccd8e7;
  padding: 10px;
}
/deep/.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 0px;
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.road1 {
  margin: 15px;
  width: 45px;
  height: 15px;
  background-color: #f8df72;
}
.road2 {
  margin: 17px;
  width: 45px;
  height: 10px;
  background-color: #f8df72;
}
.road3 {
  margin: 19px;
  width: 45px;
  height: 5px;
  background-color: #f8df72;
}
</style>
